{extend name="base"/}
{block name="body"}
<section class="vbox">
<section id="content">
<section class="hbox stretch"> 
       <aside {if condition="!session('ADMIN_SWITCH_ASIDE')"}class="aside aside-md bg-white hide "{else/}class="aside aside-md bg-white "{/if} id="subNav">
         <section class="vbox">
         <section class="vbox flex">
         <header class="header clearfix">
              <p class="h4"> {$table.title??'无标题'} <small>{$table.suggest??''}</small> </p>
              <?php if (isset($table['music'])){ ?> 
               <audio autoplay="autoplay" >
               <source src="__NOTE__/music/{$table.music}.mp3" type="audio/mpeg">您的浏览器不支持 audio 标签。
               </audio>
              <?php } ?>
         </header>
         <section>
         <section>
        

           <div class="padder"> 
              <form id="searchForm" method="post" action="{:url()}" class="form-dont-clear-url-param"> 
                      <!-- note list -->
                      <ul id="note-items" class="list-group list-group-sp">
                       {if condition="$searches"}
                       {volist name="searches" id="search"}
                        <p> 
                        <!-- 搜索 -->
                         {switch name="search['type']"}
                          {case select}
                                <select name="{$search.name}" class="form-control filter">
                                    <option value="">请选择{$search.title}</option>
                                    {volist name="search.options" id="value"}
                                        <option value="{$key}" <?php if (session(request()->controller().request()->action()."_map")[$search['name']]==$key and session(request()->controller().request()->action()."_map")[$search['name']]<>'' ) echo 'selected';?> >{$value}</option>
                                    {/volist}
                                </select>
                            {/case}
                            {case select2}
                                <select name="{$search.name}[]" id="{$search.name}" class="select2 filter" style="width: 100%;" multiple="multiple" placeholder="请选择{$search.title}">
                                <?php if ($search['options']){ 
                                if (isset(session(request()->controller().request()->action()."_map")[$search['name']])){
                                  $this_page_select2=session(request()->controller().request()->action()."_map")[$search['name']];
                                }else{
                                  $this_page_select2=[];
                                }
                                ?>
                                    {volist name="search.options" id="value"}
                                     {php}$selected = in_array($key,$this_page_select2)? 'selected' : ''; {/php}
                                        <option value="{$key}" {$selected} >{$value}</option>
                                    {/volist}
                                <?php } ?>
                                </select>
                                 <input type="hidden" name="in[]" value="{$search.name}" class="filter">
                            {/case}

                            {case time|datetime}
                                {php}
                                    $importDatetimePicker = true;
                                    //默认为当前时间
                                   
                                {/php}
                                <input type="hidden" class="filter" name="create_time_start" value="{$search.value??session(request()->controller().request()->action()."_map")['create_time_start']}"/>
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" data-field-name="create_time_start" class="text form-datetime time form-control pull-left"  value="{:dateTimeFormat(session(request()->controller().request()->action().'_map')['create_time_start'])}" placeholder="请选择开始时间"/>
                                </div>

                                <input type="hidden" class="filter" name="create_time_end" value="{$search.value??session(request()->controller().request()->action()."_map")['create_time_end']}"/>
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" data-field-name="create_time_end" class="text form-datetime time form-control pull-left"   value="{:dateTimeFormat(session(request()->controller().request()->action()."_map")['create_time_end'])}" placeholder="请选择结束时间"/>
                                </div>
                               
                            {/case}

                            {case total}
                               <input type="text" name="count" value="{$search.count}" class="filter">
                               <input type="text" name="sum" value="{$search.sum}" class="filter">
                            {/case}

                            {case line}
                            <div class="line line-dashed line-lg pull-in"></div>
                            {/case}
                         
                            {default/}
                                <input  type="text" name="{$search.name}" id="{$search.name}" class=" form-control input-sm"   placeholder="{$search.title}"  onfocus="dingjia('{$search['name']}')"  value="{:session(request()->controller().request()->action()."_map")[$search['name']]}"
                            
                      {/switch}
                      </p>
                          {present name="search.extend.like"}
                              <input type="hidden" name="like[]" value="{$search.name}" class="filter">
                          {/present}
                          {present name="search.extend.do"}
                              <input type="hidden" name="do[]" value="{$search.name}" class="filter">
                          {/present}
                          {present name="search.extend.in"}
                              <input type="hidden" name="in[]" value="{$search.name}" class="filter">
                          {/present}
                          {present name="search.extend.group"}
                            {present name="search.extend.group"}<input type="hidden" name="group_count" value="{$search.extend.count}" class="filter"> {/present}
            							  {present name="search.extend.group"}<input type="hidden" name="group_sum" value="{$search.extend.sum}" class="filter"> {/present}
            						  {/present}
                      {/volist}
                      <p>
                       <input  type="text" name="limit" class=" form-control input-sm"   placeholder="每页显示数量" {if condition="input('limit')"} value="{:input('limit')}" {else/} value="20" {/if}>
                      </p>
                      <p>
                      
                      <p class="text-center">
                      <input type="submit" class="btn btn-s-md btn-default btn-rounded" value="搜索"/> 
                      </p>
                      {/if}
                      </ul>
            </form>
            </div>
          </section>
    </section>
  </aside>
       <aside> 
        <section class="vbox"> 
         <header class="header bg-white b-b clearfix"> 
          <div class="row m-t-sm"> 
           <div class="col-sm-8 m-b-xs"> 
            
            <div class="btn-group"> 
            <a href="#subNav" onclick="switch_aside()" data-toggle="class:hide" class="btn btn-sm btn-default active"><i class="fa fa-search text fa-lg"></i><i class="fa fa-search text-active fa-lg"></i></a> 
              {volist name="buttonList" id="button"}<{$button.tag} {$button.attr} >{$button.title}</{$button.tag}> {/volist} 
              {if condition="isset($buttonMore)"}
                 <button type="button" class="btn btn-sm btn-default" title="Filter" data-toggle="dropdown"><i class="fa fa-filter"></i> <span class="caret"></span></button> 
                 <ul class="dropdown-menu">
                 {volist name="buttonMore"  id='vo'}
                  <li><a href="{$key}">{$vo}</a></li>
                 {/volist}
                 </ul>
              {/if}
            </div> 
          </div> 
           <div class="col-sm-4 m-b-xs"> 
            
           </div> 
          </div> 
         </header> 
         <section class="scrollable wrapper w-f"> 
          <section class="panel panel-default"> 
           <div class="table-responsive"> 
              <table class="table table-striped m-b-none"> 
                <thead>
                      <tr>
                          <th align="center row-selected row-selected" width="20"><input class="check-all" type="checkbox"></th>
                          {volist name="keyList" id="field"}
                              <th><a href="__SELF__&order={$field.name}">{$field.title|htmlspecialchars}</a>  </th>
                          {/volist}
                      </tr>
                    </thead>
                   <tbody>
                    {volist name="list" id="e"}
                      <tr>
                        <td><input class="ids" type="checkbox" value="{$e['id']}" name="ids[]"></td>
                        {volist name="keyList" id="field"}
                        <td style="width:auto;max-width: {$field['width']};" >{$e[$field['name']]|default=''}</td>
                        {/volist}
                      </tr>
                      {if condition="isset($e['tr'])"}
                      <tr>
                        <td style="width:auto;max-width:600px;" colspan="{:count($keyList)+1}">{$e['tr']}</td>
                      </tr>
                      {/if}
                     {/volist}
                    </tbody>
              </table>
           </div> 
          </section> 
          <?php if (isset($chart)){?>
          <div class="row">
                <div class="col-md-12">
                    <section class="panel panel-default">
                        <header class="panel-heading font-bold">
                           {$chart.title}
                        </header>
                        <div class="panel-body">
                            <div id="chart" style="height:400px">
                            </div>
                        </div>
                    </section>
                </div>
          </div>
          <?php }?>
         </section> 
         <footer class="footer bg-white b-t"> 
          <div class="row text-center-xs"> 
           <div class="col-md-6 hidden-sm"> 
            <p class="text-muted m-t">{$page.page_str}</p> 
           </div> 

           <div class="col-md-6 col-sm-12 text-right text-center-xs"> 
              {$page.page}
           </div> 
          </div> 
         </footer> 
        </section> 
       </aside> 
      </section> 
      <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>

    <script>
        function switch_aside() {
            $.get("{:url('admin/index/switchAside')}");
            // alert('已经记住用户是否打开搜索面板');
            // layer.msg('已经记住用户是否打开搜索面板', {icon: 1});
        }
        
        
    </script>
    <?php if (isset($chart)){?>
    <script type="text/javascript" src="__NOTE__/js/echarts/echarts.js"></script>
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('chart'));
          myChart.showLoading();
          option = {
              tooltip : {
                  trigger: 'item'
              },
              toolbox: {
                  show : true,
                  feature : {
                      mark : {show: true},
                      dataView : {show: true, readOnly: false},
                      magicType: {show: true, type: ['line', 'bar']},
                      restore : {show: true},
                      saveAsImage : {show: true}
                  }
              },
              calculable : true,  //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
              legend: {
                  data:{$chart.legend},  //图例
                  itemGap: 5  //图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
              },
              grid: {   //直角坐标系内绘图网格
                  top: '12%',
                  left: '1%',
                  right: '10%',
                  containLabel: true
              },
              xAxis: [
                  {
                      type : 'category',  //坐标轴类型。'value' 数值轴;'category' 类目轴，适用于离散的类目数据，'time' 时间轴,'log' 对数轴
                      data : {$chart.x_data}
                  }
              ],
              yAxis: [
                  {
                      type : 'value',
                      name : '统计数量',
                      
                  }
              ],
              dataZoom: [         //用于区域缩放
                  {
                      show: true,
                      start: 0,
                      end: 100
                  },
                  {
                      type: 'inside',
                      start: 94,
                      end: 100
                  },
                  {
                      show: true,
                      yAxisIndex: 0,
                      filterMode: 'empty',
                      width: 30,
                      height: '80%',
                      showDataShadow: false,
                      left: '93%'
                  }
              ],
              series :{$chart.series}
          };

          myChart.setOption(option);
          myChart.hideLoading();
        
       </script> 
        <?php }?>
{/block}



{block name="js"}
<script type="text/javascript">
    // $('#cusTable').on('load-success.bs.table', function (e, row, element) {
      $('[data-role="modal_popup"]').click(function(){ // 模态弹窗
        var target_url = $(this).attr('modal-url'); // url
        var target_form = $(this).attr('target-form'); // 表单
        var title = $(this).data('title'); // 标题
        var title2 = $(this).text(); // 标题2
        var width = $(this).data('width'); // 宽度
        var height = $(this).data('height'); // 高度
        var full = $(this).data('full'); // 是否全屏
        var close = $(this).data('close'); // 关闭按钮
        var maxmin = $(this).data('maxmin'); // 是否最大化最小化
        var resize = $(this).data('resize'); // 是否可重定义大小
        var shade = $(this).data('shade'); // 是否可重定义大小
        if ( !full ) full = false;
        if ( !title ) title = false;
        if ( !close ) {
          if ( title ) {
            close = 1;
          } else {
            close = false;
          }
        }
        if ( !maxmin ) {
          if ( title ) {
            maxmin = true;
          } else {
            maxmin = false;
          }
        }
        if ( !resize ) resize = true;
        if ( !shade ) shade = 0.8;
        // if ( !title ) title = title2;
        if ( !width && !height ) {
          width = $(window).width()-100;
          height = $(window).height()-100;
        } else if ( !width && height ) {
          width = height;
        } else if ( width && !height ) {
          height = width;
        }
        if ( !endWith(width, '%') ) width += "px";
        if ( !endWith(height, '%') ) height += "px";
        if ( target_form!=undefined ) {
          var form = $('.'+target_form);
          if ( form.get(0) == undefined ) {
            updateAlert('没有可操作数据', 'danger');
            return false;
          } else if ( form.get(0).nodeName == 'FORM' ) {
            query = form.serialize();
          } else if ( form.get(0).nodeName == 'INPUT' || form.get(0).nodeName == 'SELECT' || form.get(0).nodeName == 'TEXTAREA' ) {
            query = form.serialize();
          } else {
            query = form.find('input,select,textarea').serialize();
          }
          if ( !query.length && $(this).attr('can_null') != 'true' ) {
            updateAlert('没有可操作数据', 'danger');
            return false;
          }
          target_url = target_url+'&'+query;
        }
     
        var pagelayer = layer.open({
          type: 2,
          title: title,
          resize: resize, // 重定义大小
          maxmin: maxmin, // 最大化最小化
          closeBtn: close, // 关闭按钮
          shade: shade,
          shadeClose: true, // 背景层关闭
          area: [
            width,
            height
          ],
          content: target_url, // 内容链接
          scrollbar: false // 屏蔽浏览器滚动条
        });
        if ( full ) layer.full(pagelayer);
      });
    // });
  </script>
  <script type="text/javascript">
        $(function(){
            $(".search").hide();
            $('.select2').select2();
            $('#{:session('ONFOCUS')}').focus();
            $('#{:session('ONFOCUS')}').val('');
         
        });
  </script>

  <script>
      
        function dingjia(name) {
            $.get("{:url('admin/index/dingjia')}?name="+name);
            // alert('已经记住用户是否打开搜索面板');
            // layer.msg('已经记住用户是否打开搜索面板', {icon: 1});
        }
        
    </script>
    
 {/block}